<template>
  <div class="container" >
    <!--    <div class="">{{question}}</div>-->
    <el-form class="form">
      <el-row class="row0">
        <el-col>
          <el-checkbox v-model="isSelect" @change="HandleChangeSelect"></el-checkbox>
        </el-col>
      </el-row>
      <el-row class="row1" justify="start">
        <el-col :span="12" :pull="5">
          <div class="id">
            <span>ID： </span>
            <span class="insert">{{question.id}}</span>
          </div>
        </el-col>
        <el-col class="difficulty" :span="12">
          <span>难度： </span>
          <span class="insert">{{question.difficulty}}</span>
        </el-col>
      </el-row>
      <el-row class="row2" :gutter="5">
        <el-col :span="2" >
          <div class="index">{{index+1+"."}}</div>
          <div class="type" v-if="question.type===2"> (选择题)</div>
          <div class="type" v-else-if="question.type===3">(填空题)</div>
          <div class="type" v-else-if="question.type===4">(判断题)</div>
          <div class="type" v-else-if="question.type===5">(简答题)</div>
        </el-col>
        <el-col class="title" :span="18">{{question.title}}</el-col>
        <el-col class="score" :span="4">
          <span>总分: </span>
          <span class="insert">{{score}}</span>
          <span>分 </span>
        </el-col>
      </el-row>

<!--            选择题的主体区-->
      <template v-if="question.type===2">
        <el-row class="row3" v-for="(item,index) in question.qt_body.selections" :key="item">
          <el-col :span="2">
            <el-checkbox v-model="assist_choice[index]"></el-checkbox>
          </el-col>
          <el-col :span="2">
            {{index+1+"."}}
          </el-col>
          <el-col class="selection" :span="20">
            {{item}}
          </el-col>
        </el-row>
      </template>
<!--            填空题主体区·-->
      <template v-else-if="question.type===3">
        <el-row class="row3" v-for="(item,index) in assist_blank" :key="index">
          <el-col :span="2">
            {{index+1+"."}}
          </el-col>
          <el-col :span="10" class="blank_row">
            <!--            <el-input autosize resize="false" ></el-input>-->
            <el-input class="blank" v-model="assist_blank[index]" type="textarea" autosize resize="none" ></el-input>
          </el-col>
        </el-row>
      </template>
<!--            判断题主体区-->
      <template v-else-if="question.type===4">
        <el-row class="row3">
          <el-col class="judging-radio-group">
            <template>
              <el-checkbox v-model="question.qt_body.answer"  class="judging-radio">对</el-checkbox>
              <el-checkbox v-model="question.qt_body.answer"  class="judging-radio">错</el-checkbox>
            </template>
          </el-col>
        </el-row>

      </template>
<!--            简答题主体区-->
      <template v-else-if="question.type===5">
        <el-row class="row3">
          <el-col :span="4">
            你的答案:
          </el-col>
          <el-col :span="20">
            <el-input v-model="question.answer_body" type="textarea" :autosize="{ minRows: 5, maxRows: 10}" resize="none" ></el-input>
          </el-col>

        </el-row>


      </template>

      <el-row class="row5">
        <el-col>
          <div class="analysis">
            <span>题目解析: </span>
            <span>{{question.analysis}}</span>

          </div>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "QuestionSelect",
  props: {
    question: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  computed: {
    score: function () {
      if (Array.isArray(this.question.qt_body.scoreDefault)) {
        let sum = 0;
        this.question.qt_body.scoreDefault.forEach(i => sum += i)
        return sum;
      } else return this.question.qt_body.scoreDefault;
    },

  },
  data() {
    return {
      qt_body: null,
      answer_body: [],
      maxAnswerNum:0,
      isSelect:false,
    }
  },
  methods: {
    HandleChangeSelect(e){
      if(e===true){
        this.$emit("selected",this.question);
      }
      else {
        this.$emit("unselected",this.question);
      }
    }


  },
  created() {
  },
  watch:{
  }
}
</script>

<style scoped lang="less">
*{
  padding:0;
  margin:0;
}
.container{
  //height:100px;
  width:100%;
  border-top:1px solid #4b4a4a;
  .form{
    padding:2rem 4rem;
  }
}

.title{
  text-align:start;
}
.score{
  text-align:end;
}
.difficulty{
  text-align:end;
}
.type{
  color:red;
  font-size:0.8rem;
  text-align:end;
}
.index{
  text-align:end;
  position: relative;
  right:15%;
  font-size:1.1rem;
  font-weight:600;
}
.selection{
  text-align:start;
}
.blank_row{
  text-align:start;
  .blank{
    border:0;
    //background-color:#1b6d85;
  }
}

.judging-radio-group{
  text-align:start;
  .judging-radio{
    display:block;
  }
}


.row1,.row2,.row3{
  margin:1rem 0 ;
  padding:1%;
}
.row3{
  margin:0;
}
.insert{
  border-bottom:1px solid #000000;
  white-space:nowrap;
  margin:0 0.25rem;
  padding:0 0.3rem
}

</style>